/*
 * @Author: mylesshie@gmail.com
 * @Date: 2020-07-06 17:06:46
 * @LastEditors: mylesshie@gmail.com
 * @LastEditTime: 2020-08-23 20:49:44
 * @description:
 */

import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import { View, Text } from 'react-native'
import { Button } from 'react-native-elements'
import { Toast } from 'native-base'
import Icon from 'react-native-vector-icons/AntDesign'
import * as userActions from '@/actions/user'
import styles from './styles'

const CommentItem = props => {
  const dispatch = useDispatch()
  const [isLike, setIsLike] = useState(false)
  const [likeCount, setlikeCount] = useState(props.parise)
  const [isBlock, setIsBlock] = useState(false)

  const _submitLike = () => {
    dispatch(userActions.submitLike(props.id)).then(() => {
      setIsLike(true)
      setlikeCount(likeCount + 1)
    })
  }

  const _cancelLike = () => {
    dispatch(userActions.cancelLike(props.id)).then(() => {
      setIsLike(false)
      setlikeCount(likeCount - 1)
    })
  }

  // 举报
  const _submitBlock = () => {
    dispatch(userActions.submitBlock(props.id)).then(() => {
      setIsBlock(true)
      return Toast.show({
        text: '已举报',
        duration: 1500
      })
    })
  }

  return (
    <View style={styles.wrap}>
      <View style={styles.top}>
        <Text numberOfLines={2} style={styles.author}>{props.cusNikeName}</Text>
        <Text style={styles.date}>{props.createdTime}</Text>
      </View>
      <View style={styles.middle}>
        <Text style={styles.contText}>{props.commentDesc}</Text>
      </View>
      <View style={styles.bottom}>
        { isLike ? 
          <Button
            type="clear"
            onPress={_cancelLike}
            titleStyle={styles.likeBtnText}
            icon={<Icon name="like1" type="ant-design" size={15} color="#d2363a" />}
            title={String(likeCount)}
          /> :
          <Button
            type="clear"
            onPress={_submitLike}
            titleStyle={styles.likeBtnTextDisable}
            icon={<Icon name="like1" type="ant-design" size={15} color="#ccc" />}
            title={String(likeCount)}
          />
        }
        <Button
          type="clear"
          onPress={_submitBlock}
          titleStyle={isBlock ? styles.likeBtnText : styles.likeBtnTextDisable}
          icon={<Icon name="meho" type="ant-design" size={15} color={isBlock ? '#D2363A' : '#ccc'} />}
          title={isBlock ? '已举报':'举报'}
        />
      </View>
    </View>
  )
}

export default CommentItem
